<template>
	<view class="home">
		<u-sticky>
			<view class="navbar">
				<!-- 切换 -->
				<uni-icons type="left" size="26" @click="fanhui"></uni-icons>
				<view class="navbar_flx">
					<view class="navbar_text" hover-class="navbar_text_av" @click="cezhanfn">
						选择测站
					</view>
				</view>
			</view>
		</u-sticky>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devitem">
				<view class="devitem_flx" v-for="(i,index) in dataList" :key="index" @click="devitFn(i)">
					<view class="flx_cob">
						<view class="tubi">

						</view>
						<view class="textt">
							<view class="">
								{{i.informant}}
							</view>
							<view class="texbb">
								{{i.measuringTime}}
							</view>
						</view>
					</view>

					<view class="yuansfla">
						<view class="">
							{{i.waterFlow}}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 抽屉断面信息列表 -->
		<uni-drawer ref="showRight" mode="left" :mask-click="false" :width="350" maskClick>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drawer_box">
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择测站" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<!-- 数据内容 q = kh^n -->
					<view class="forbox_cezhan">
						<view v-for="(i, index) in cheZhanRange" :key="index" class="list-item"
							:class="activeIndex === index ? 'active-blue' : ''" @click="cheZHANchange(i,index)">
							{{ i.surveyStationName }}
						</view>
					</view>
					<!-- 选择站点 -->
					<uni-section class="mb-10" title="选择测段" titleFontSize="20px" v-if="stationType == 0">
						<template v-slot:decoration>
							<view class="decoration_a"></view>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="选择计量点" titleFontSize="20px" v-if="stationType == 1">
						<template v-slot:decoration>
							<view class="decoration_a"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="forbox_cezhan">
						<view v-for="(i, index) in cheDuanRange" :key="index" class="list-item"
							:class="ceduanIndex === index ? 'active-blue_cedian' : ''" @click="zhanDIANchange(i,index)">
							{{ i.name }}
						</view>
					</view>
					<!-- 确定 -->
					<view class="" style="padding: 20rpx;margin-top: 50rpx;display: flex;align-items: center;">
						<u-button style="margin-right: 20rpx;" @click="closeDrawer" type="error" shape="circle"
							text="取消"></u-button>
						<u-button @click="uploadDrawer" throttleTime="1000" type="success" shape="circle"
							text="确定"></u-button>
					</view>

				</view>
			</scroll-view>
		</uni-drawer>
		<!-- 弹窗 -->
		<!-- 弹窗历史记录详情 -->
		<u-popup :show="popupShow" :round="10" mode="top">
			<view class="popup_box">
				<view class="popup_text">
					<!-- 							<view class="popup_text_l">123</view>
							<view class="popup_text_r">456</view> -->
				</view>
				<view class="popup_list" v-if="historicalShow.measuringMethod == 1">
					<view class="popup_it" v-for="(i,index) in historicalShow.measuredData" :key="index">
						<view class="popup_top">
							<view class="popup_l">
								{{index + 1}}B
							</view>
							<view class="popup_cona">
								{{i.time}}
							</view>
							<view class="popup_conb">
								{{i.nub}}
							</view>
							<view class="popup_conb">
								{{i.evenness}}
							</view>
							<view class="popup_r">
								{{i.aveTy}}
							</view>
						</view>
					</view>
				</view>
				<view class="popup_three" v-if="historicalShow.measuringMethod == 3">
					<view class="popup_three_it" v-for="(i,index) in historicalShow.measuredData" :key="index">
						<view class="popup_three_top">
							<view class="popup_top_l">
								测线{{index + 1}}
							</view>
							<view class="popup_top_r">
								平均流速: {{i.aveTy}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								A
							</view>
							<view class="popup_top_zz">
								{{i.a.time}}
							</view>
							<view class="popup_top_z">
								{{i.a.nub}}
							</view>
							<view class="popup_top_z">
								{{i.a.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.a.liusu}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								B
							</view>
							<view class="popup_top_zz">
								{{i.b.time}}
							</view>
							<view class="popup_top_z">
								{{i.b.nub}}
							</view>
							<view class="popup_top_z">
								{{i.b.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.b.liusu}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								C
							</view>
							<view class="popup_top_zz">
								{{i.c.time}}
							</view>
							<view class="popup_top_z">
								{{i.c.nub}}
							</view>
							<view class="popup_top_z">
								{{i.c.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.c.liusu}}
							</view>
						</view>
					</view>
				</view>
				<view class="butt_d">
					<view class="butt_box">
						水深：{{historicalShow.depthWater}} 米
					</view>
					<view class="butt_box">
						测量方法：{{historicalShow.measuringMethod}}点法
					</view>
				</view>
				<view class="butt_ll">
					流量：{{historicalShow.waterFlow}}
				</view>
				<view class="butt_back" @click="buttupFn">
					返回
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
				ssId: null, //上传测站
				sfsId: null, //上传测段
				fmpId: null, //上传计量点
				currentMeterType: null, //测量类型
				activeIndex: null, // 当前选中项索引
				ceduanIndex: null, // 测段
				jiliangdianIndex: null, // 计量点
				cheZhanRange: [], //测站
				cheDuanRange: [], //测段
				stationType: null, //测站类型
				activeIndex: null, // 当前选中项索引
				typeObject: {}, //历史记录类型对象

				historicalShow: {}, //历史详情
				popupShow: false, //历史详情
			}
		},
		onShow() {
			this.dataList = []
			setTimeout(()=>{
				this.reloadList()
			},300)
		},
		onLoad(option) {

		},
		methods: {
			// 返回
			buttupFn() {
				this.popupShow = false
			},
			// 人工测报
			devitFn(i) {
				// this.historicalShow = i 1 2 3
				// this.historicalShow.measuredData = JSON.parse(i.measuredData)
				// this.historicalShow.waterFlow = i.waterFlow
				// this.popupShow = true
				if(i.currentMeterType == 1){
					uni.navigateTo({
						url: '/pages/manualFlowMeasurement/measuringCurrentRecordSheetShowOne?id=' + i.id
					});
				}
				if(i.currentMeterType == 2){
					uni.navigateTo({
						url: '/pages/manualFlowMeasurement/measuringCurrentRecordSheetShowTwo?id=' + i.id
					});
				}
				if(i.currentMeterType == 3){
					uni.navigateTo({
						url: '/pages/manualFlowMeasurement/measuringCurrentRecordSheetShowThree?id=' + i.id
					});
				}
				console.log(i.currentMeterType);
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 测站
			cezhanfn() {
				this.$refs.showRight.open()
				this.deviceListFn()
			},
			// 测站列表
			deviceListFn() {
				uni.$u.http.get('/device/survey_station/list').then(res => {
					if (res.code == 200) {
						console.log('res', res);
						this.cheZhanRange = res.rows
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 取消
			closeDrawer() {
				this.$refs.showRight.close()
			},
			// 确定
			uploadDrawer() {
				// 测段
				if (this.stationType == 0) {
					this.typeObject = {}
					// this.typeObject.pageSize = this.pageSize
					// this.typeObject.pageNum = this.pageNum
					this.typeObject.ssId = this.ssId
					this.typeObject.sfsId = this.sfsId
					this.downCallback()
				}
				if (this.stationType == 1) {
					this.typeObject = {}
					// this.typeObject.pageSize = this.pageSize
					// this.typeObject.pageNum = this.pageNum
					this.typeObject.ssId = this.ssId
					this.typeObject.fmpId = this.fmpId
					this.downCallback()
				}
				this.$refs.showRight.close()
			},
			// 测段信息列表
			ceduanListFn(id) {
				uni.$u.http.get('/device/steadyFlowSection/list', {
					params: {
						ssId: id
					}
				}).then(res => {
					if (res.code == 200) {
						this.cheDuanRange = res.rows
						console.log('res', res);
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 计量点信息列表
			jiliangdianListFn(id) {
				uni.$u.http.get('/device/flowMeteringPoint/list', {
					params: {
						ssId: id
					}
				}).then(res => {
					if (res.code == 200) {
						this.cheDuanRange = res.rows
						// this.jiLiangDianRange = res.rows
						console.log('res', res);
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 选择测站
			cheZHANchange(i, index) {
				this.ceduanIndex = null
				this.activeIndex = index
				this.stationType = i.stationType
				this.ssId = i.id
				this.surveyStationName = i.surveyStationName
				// 测段
				if (i.stationType == 0) {
					this.ceduanListFn(i.id)
				}
				if (i.stationType == 1) {
					this.jiliangdianListFn(i.id)
				}

			},
			// 选择侧端或者计量点
			zhanDIANchange(i, index) {
				this.ceduanIndex = index
				if (this.stationType == 0) {
					this.sfsId = i.id
				}
				if (this.stationType == 1) {
					this.fmpId = i.id
				}
			},
			upCallback(page) {
				console.log('this.typeObject', this.typeObject);
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/current_meter_record/list', {
					params: {
						pageSize: pageSize,
						pageNum: pageNum,
						...this.typeObject
					}
				}).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						// 处理全显示
						// if(this.ssId == null){
						// 	return
						// }
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						console.log('列表', res);
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 电量
			electricFn(data) {
				let nub = (data - 8) / (12 - 8) * 100
				return nub.toFixed(0)
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {

		// 弹窗

		// 弹出详情
		.popup_box {
			width: 750rpx;
			height: 1600rpx;
			overflow: auto;
			background-color: #ecead9;

			.popup_text {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #4d1e1e;

				.popup_text_l {
					font-size: 40rpx;
				}

				.popup_text_r {
					font-size: 30rpx;
					margin-left: 20rpx;
				}
			}

			.popup_three {
				padding-top: 80rpx;

				.popup_three_it {
					border-radius: 15rpx;
					padding: 10rpx;
					margin: 20rpx;
					background-color: rgba(177, 142, 124, 0.2);

					.popup_three_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #461f1c;

						.popup_top_l {}

						.popup_top_r {
							font-size: 45rpx;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							background-color: rgba(177, 142, 124, 0.3);
						}
					}

					.popup_three_a {
						color: #000000;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 45rpx;

						.popup_top_x {
							width: 80rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_z {
							width: 100rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_zz {
							width: 180rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_y {
							width: 160rpx;
							margin-top: 10rpx;
							border-radius: 10rpx;
							text-align: center;
							background-color: rgba(161, 115, 109, 0.3);
						}
					}
				}
			}

			.popup_list {
				// margin-top: 20rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				padding-top: 80rpx;
				// background-color: #2a4d7d;

				.popup_it {
					width: 700rpx;
					padding: 10rpx;
					margin: 10rpx 0;
					border-radius: 10rpx;
					background-color: rgba(177, 142, 124, 0);
					// border: 1rpx solid #888888;
					color: #000000;

					.popup_top {
						display: flex;
						justify-content: space-between;
						font-size: 50rpx;

						.popup_l {
							width: 80rpx;
							text-align: center;
							// background-color: #915c95;
							// border-right: 1rpx solid rgba(177, 142, 124, 0.1);
						}

						.popup_cona {
							width: 180rpx;
							text-align: center;
							border-radius: 5rpx;
							// border-right: 1rpx solid rgba(177, 142, 124, 0.5);
							background-color: rgba(177, 142, 124, 0.3);
						}

						.popup_conb {
							width: 90rpx;
							text-align: center;
							border-radius: 5rpx;
							background-color: rgba(177, 142, 124, 0.3);
						}

						.popup_r {
							width: 190rpx;
							text-align: center;
							border-radius: 5rpx;
							color: #000000;
							background-color: rgba(166, 122, 122, 0.6);
						}
					}
				}
			}

			// .popup_list {
			// 	// margin-top: 20rpx;
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	// background-color: #2a4d7d;

			// 	.popup_it {
			// 		width: 338rpx;
			// 		margin: 10rpx;
			// 		padding: 10rpx;
			// 		border-radius: 10rpx;
			// 		background-color: rgba(177, 142, 124, 0.2);
			// 		// border: 1rpx solid #888888;
			// 		color: #000000;

			// 		.popup_top {
			// 			display: flex;
			// 			justify-content: space-between;

			// 			.popup_l {
			// 				width: 80rpx;
			// 				// background-color: #915c95;
			// 			}

			// 			.popup_r {
			// 				width: 220rpx;
			// 				text-align: center;
			// 				border-radius: 5rpx;
			// 				color: #000000;
			// 				background-color: rgba(166, 122, 122, 0.2);
			// 			}
			// 		}

			// 		.time_con {
			// 			// display: flex;
			// 			// justify-content: space-around;

			// 			.time_tex {
			// 				display: flex;
			// 				justify-content: space-between;
			// 				align-items: center;
			// 				font-size: 30rpx;

			// 				.time_jus {
			// 					width: 200rpx;
			// 					text-align: justify;
			// 					text-align-last: justify;
			// 				}
			// 			}
			// 		}
			// 	}

			// }

			.butt_d {
				margin: 10rpx;
				font-size: 40rpx;
				color: #000000;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.butt_box {
					width: 338rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					// border: 1rpx solid #000000;
					background-color: rgba(177, 142, 124, 0.2);
				}
			}

			.butt_ll {
				padding: 10rpx;
				margin: 10rpx;
				font-size: 50rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #000000;
				background-color: rgba(177, 142, 124, 0.5);
			}

			.butt_back {
				padding: 10rpx;
				margin: 10rpx 10rpx 300rpx 10rpx;
				font-size: 50rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #ffffff;
				background-color: #6f3e3e;
			}
		}

		// 上传
		.drawer_box {
			padding: 50rpx 30rpx 30rpx 30rpx;

			.decoration {
				width: 10rpx;
				height: 40rpx;
				border-radius: 15rpx;
				margin-right: 15rpx;
				background-color: #144892;
			}

			.decoration_a {
				width: 10rpx;
				height: 40rpx;
				border-radius: 15rpx;
				margin-right: 15rpx;
				background-color: #55aa7f;
			}

			.forbox_cezhan {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.list-item {
					padding: 10rpx 20rpx;
					margin: 10rpx;
					border: 1rpx solid #eee;
					border-radius: 15rpx;
					font-size: 35rpx;
					transition: all 0.3s;
					color: #000000;
					background-color: #f3f3f3;
				}

				.active-blue {
					background-color: #144892;
					color: #fff;
				}

				.active-blue_cedian {
					background-color: #55aa7f;
					color: #fff;
				}
			}

		}

		.navbar {
			padding: 80rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(242, 241, 246, 0.3);
			backdrop-filter: blur(20rpx);

			/* 应用磨砂效果 */
			// background-color: #5275a8;
			.navbar_flx {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.navbar_byg {
					border-radius: 10rpx;
					background-color: #5275a8;
					border: #000000 solid 1rpx;
				}

				.navbar_acv {
					background-color: #75a8f0;
				}

				.navbar_text {
					font-size: 48rpx;
					border-radius: 10rpx;
					padding: 5rpx 20rpx;
					margin: 0 10rpx;
					color: #ffffff;
					background-color: #5275a8;
					border: #000000 solid 1rpx;
				}

				.navbar_text_av {
					background-color: #2f4462;
				}
			}
		}

		.devitem {
			// padding: 30rpx;
			// border-radius: 30rpx;

			.devitem_flx {
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// border: 1rpx solid #000000;
				background-color: rgba(255, 255, 255, 0.9);

				.flx_cob {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tubi {
						width: 10rpx;
						height: 40rpx;
						border-radius: 30rpx;
						margin-right: 20rpx;
						background-color: #5275a8;
					}

					.textt {
						font-size: 45rpx;
						color: #000000;

						.texbb {
							font-size: 35rpx;
							color: #646464;
						}
					}
				}

				.yuansfla {
					font-size: 60rpx;
					color: #7098da;
				}

			}

		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f2f1f6;
	}
</style>